<template>
  <div>
    <!--工具栏-->
    <div class="crud-group">
      <!-- 搜索 -->
      <el-input
        v-model="clusterName"
        placeholder="请输入集群名称"
        style="width: 12rem;"
      />
      <div style="display: flex;">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="search"
        >搜索</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addClick"
        >新增</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="clusterList"
      border
    >
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="clusterName"
        label="集群名称"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="clusterVersion"
        label="集群版本"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="clusterFlag"
        label="集群标识"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="hdfsPrefixPath"
        label="hdfs前缀路径"
        min-width="320px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="clusterWeight"
        label="权重"
        min-width="120px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="110px"
        show-overflow-tooltip
      />
      <el-table-column
        width="100px"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editClick(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="deleteClick(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <el-pagination
        :current-page="current"
        :page-size="size"
        layout="prev, pager, next,sizes,total"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 编辑表单 -->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="closeEdit"
      :visible.sync="openEdit"
      :title="title"
      width="1000px"
    >
      <el-form
        ref="jqForm"
        :inline="true"
        label-width="120px"
        :rules="rules"
        :model="jqForm"
      >
        <el-form-item
          label="集群名称"
          prop="clusterName"
        >
          <el-input
            v-if="title === '编辑'"
            v-model="jqForm.clusterName"
            placeholder="请输入"
            disabled
          />
          <el-input
            v-else-if="title === '新增'"
            v-model="jqForm.clusterName"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="集群版本"
          prop="clusterVersion"
        >
          <el-select
            v-model="jqForm.clusterVersion"
            placeholder="请选择"
            style="width: 190px"
            clearable
          >
            <el-option
              v-for="val in versionList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="集群标识"
          prop="clusterFlag"
        >
          <el-input
            v-model="jqForm.clusterFlag"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="hdfs前缀路径"
          prop="hdfsPrefixPath"
        >
          <el-input
            v-model="jqForm.hdfsPrefixPath"
            placeholder="请输入"
            style="width: 320px"
            :disabled="title === '编辑'"
          />
        </el-form-item>
        <el-form-item
          label="集群权重"
          prop="clusterWeight"
        >
          <el-input-number v-model="jqForm.clusterWeight" :default-value="0" :min="0" :max="100" label=""></el-input-number>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px; margin-left: 45%">
        <el-button
          type="primary"
          plain
          @click="closeEdit"
        >取消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ballsApi from '@/api/dashboard/ballsPanel'

export default {
  name: 'DataDesensitizationRules',
  data() {
    return {
      loading: false,
      current: 1,
      size: 10,
      length: 0,
      clusterList: [],
      clusterName: '',
      openEdit: false,
      jqForm: {
        clusterWeight: 0,
        clusterName: '',
        clusterFlag: '',
        clusterVersion: '',
        hdfsPrefixPath: '',
        appPath: ''
      },
      title: '',
      versionList: ['CDH 6.3.2 (Parcel)'],
      rules: {
        clusterVersion: [
          { required: true, message: '请选择集群版本', trigger: 'change' }
        ],
        clusterName: [
          { required: true, message: '请填写集群名称', trigger: 'blur' }
        ],
        clusterFlag: [
          { required: true, message: '请填写集群标识', trigger: 'blur' }
        ],
        hdfsPrefixPath: [
          { required: true, message: '请填写hdfs前缀路径', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getclustersparingconf()
  },
  methods: {
    getclustersparingconf(name, resetPage) {
      if (resetPage) {
        this.current = 1
      }
      this.loading = true
      var data = {
        current: this.current,
        size: this.size,
        clusterName: name
      }
      ballsApi.getclustersparingconf(data)
        .then((data) => {
          this.length = data.total
          if (data.total === 0) {
            this.jqForm = {}
          } else {
            this.jqForm = data.records[0]
          }
          this.clusterList = data.records
          this.loading = false
        })
        .catch(() => { })
    },
    search() {
      this.getclustersparingconf(this.clusterName)
    },
    reset() {
      this.clusterName = ''
      this.getclustersparingconf(this.clusterName)
    },
    // 分页
    handleSizeChange(val) {
      this.current = 1
      this.size = val
      this.getclustersparingconf()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.getclustersparingconf(null, false)
    },
    editClick(row) {
      console.log(row)
      this.title = '编辑'
      var temp = {
        id: row.id,
        clusterName: row.clusterName,
        clusterFlag: row.clusterFlag,
        clusterVersion: row.clusterVersion,
        hdfsPrefixPath: row.hdfsPrefixPath,
        appPath: row.appPath,
        clusterWeight: row.clusterWeight
      }
      this.jqForm = temp
      this.openEdit = true
    },
    closeEdit() {
      this.openEdit = false
      this.$refs['jqForm'].resetFields()
      this.jqForm = {}
    },
    deleteClick(row) {
      const h = this.$createElement
      this.$msgbox(
        {
          title: '提示',
          message: h('p', null, [
            h('span', { style: 'color: red' }, row.clusterName),
            h('span', null, '为重要数据，是否删除？')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }
      ).then(() => {
        var data = {
          id: row.id,
          del: 1
        }
        ballsApi.del(data).then((data) => {
          this.getclustersparingconf()
        })
      }).catch(() => {
        return
      })
    },
    submit() {
      console.log(this.jqForm)
      this.$refs['jqForm'].validate((valid) => {
        if (valid) {
          if (this.title === '编辑') {
            ballsApi.edit(this.jqForm).then((data) => {
              this.getclustersparingconf()
              this.openEdit = false
            })
          } else {
            ballsApi.add(this.jqForm).then((data) => {
              this.getclustersparingconf()
              this.openEdit = false
              this.jqForm = {}
            })
          }
        } else {
          // console.log("error submit!!");
          return false
        }
      })
    },

    addClick() {
      this.jqForm = {}
      this.jqForm.clusterWeight = 0
      this.title = '新增'
      this.openEdit = true
    }
  }
}
</script>
